<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 动态绑定style属性 -->
  <!-- 对象 -->
  <!-- <div id="app">
    写死  :style="{css属性名称:css属性值,...}" 注意：css属性名建议使用驼峰命名，
      如果想使用带-的css属性名称，需要使用``包裹即可。  
     <div :style="{color:'red','font-size':'30px'}">元素</div> 
     如果想动态绑定style的值，将对象声明在data当中即可 
    <div :style="styleObject">元素</div>
    <button @click="styleObject.color='red'">加红色</button>
    <button @click="styleObject.fontSize='30px'">变大</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 默认没有 color 和 fontSize 值
        // styleObject: { color: 'red', fontSize: '30px' }
        // 注意：响应式数据（驱动视图更新的数据）必须提前在data中显性的声明。
        // styleObject: {}
        styleObject: {
          color: null,
          fontSize: null
        }
      }
    })
  </script> -->
  
  <!-- 数组 -->
  <div id="app">
    <!-- 写死 :style="[{css属性名称:css属性值,...},{},{},...]"-->
    <!-- 动态 需要将数组声明在data中 -->
    <div style="color: hotpink;" :style="styleArray">元素</div>
    <button @click="styleArray.push({color:'red'})">加红色</button>
    <button @click="styleArray.push({fontSize:'30px'})">变大</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 需要追加的选项 {color:'red'},{fontSize:'30px'}
        styleArray: []
      }
    })
  </script>
</body>

</html>